<template>
  <div class="promoterList">
    <ContentBox title="推广统计" @left="back" :fixed="true" :ostyle="style" titlecolor="block">
      <template slot="oleft"><van-icon color="#000" name="arrow-left"/></template>
    </ContentBox>
    <notice :top="$remToPx('0.88')"></notice>
    <div class="promoterHeader">
      <div class="headerCon acea-row row-between-wrapper" :style="{backgroundImage:`url(${$img('transparent.png')})`}">
        <div>
          <div class="name">推广人数</div>
          <div class="money">
            <span class="num">{{listData.total + listData.totalLevel}}</span>
          </div>
        </div>
        <div class="price" :style="{backgroundImage:`url(${$img('person.png')})`}"></div>
      </div>
    </div>
    <div class="nav acea-row">
      <!-- <div class="item" :class="index === 0 ? 'on' : ''" @click="tab(0)">一级({{listData.total}})</div>
      <div class="item" :class="index === 1 ? 'on' : ''" @click="tab(1)">二级({{listData.totalLevel}})</div> -->
    </div>
    <!-- <div class="search row-between-wrapper">
      <form>
        <div class="input">
          <input placeholder="点击搜索会员名称"/>
          <span class="iconfont" :style="{backgroundImage:`url(${$img('close.png')})`}"></span>
        </div>
      </form>
      <div class="sousuo2" :style="{backgroundImage:`url(${$img('sousou.png')})`}"></div>
    </div> -->
    <div class="list">
      <div class="sortNav acea-row row-middle" v-if="0">
        <div class="sortItem">
          团队排序
          <img :src="$img('sort1.png')" v-if="childCount == 1" />
          <img :src="$img('sort2.png')" v-if="childCount == 2" />
          <img :src="$img('sort3.png')" v-if="childCount == 3" />
        </div>
        <div class="sortItem">
          金额排序
          <img :src="$img('sort1.png')" v-if="numberCount == 1" />
          <img :src="$img('sort2.png')" v-if="numberCount == 2" />
          <img :src="$img('sort3.png')" v-if="numberCount == 3" />
        </div>
        <div class="sortItem">
          订单排序
          <img :src="$img('sort1.png')" v-if="orderCount == 1" />
          <img :src="$img('sort2.png')" v-if="orderCount == 2" />
          <img :src="$img('sort3.png')" v-if="orderCount == 3" />
        </div>
      </div>
      <div class="sortList" v-for="(item, index) in listData.list" :key="index">
        <div class="item acea-row row-between-wrapper">
          <div class="picTxt acea-row row-between-wrapper">
            <div class="pictrue"><img :src="item.avatar" /></div>
            <div class="text">
              <div class="name line1">{{item.nickname}}</div>
              <div>加入时间: {{item.time}}</div>
            </div>
          </div>
          <div class="right">
            <div>
              <span class="font-color-red">{{item.childCount}}</span> 人
            </div>
            <div>{{item.orderCount}} 单</div>
            <div>{{item.numberCount}} 元</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      style: {
        backgroundColor: '#f6f6f6'
      },
      listData: '',
      index: 0
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getData (index) {
      this.$axios.post('/api/spread/people', {
        grade: index
      }).then(res => {
        this.listData = res.data
      })
    },
    tab (index) {
      this.index = index
      this.getData(index)
    }
  },
  created () {
    this.getData(0)
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
